<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="filter-form">
      <el-form-item label="院区">
        <el-input v-model="searchForm.campusName" placeholder="请输入院区"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option label="全部" :value="''"></el-option>
          <el-option label="启用" :value="1"></el-option>
          <el-option label="禁用" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchList">查询</el-button>
        <el-button type="success" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="campusId" label="编号" width="100"></el-table-column>
      <el-table-column prop="campusName" label="院区"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="contactPhone" label="电话"></el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.status === 1 ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createdAt ? scope.row.createdAt.substr(0, 19).replace('T', ' ') : '' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 20px; text-align: right"
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :page-size="searchForm.pageSize"
      :current-page="searchForm.pageNum"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        campusName: '',
        status: '',
        dateRange: []
      },
      tableData: [],
      total: 0
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    fetchList() {
      axios.get('/campuses/list', {
        params: {
          pageNum: this.searchForm.pageNum,
          pageSize: this.searchForm.pageSize,
          campusName: this.searchForm.campusName,
          status: this.searchForm.status,
          startTime: this.searchForm.dateRange[0] || '',
          endTime: this.searchForm.dateRange[1] || ''
        }
      }).then(res => {
        if (res.data && res.data.records) {
          this.tableData = res.data.records.map((item, idx) => ({
            ...item,
            index: (this.searchForm.pageNum - 1) * this.searchForm.pageSize + idx + 1
          }));
          this.total = res.data.total;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
    handlePageChange(page) {
      this.searchForm.pageNum = page;
      this.fetchList();
    },
    handleAdd() {
      this.$message.info('点击了新增');
    },
    handleEdit(row) {
      this.$message.info('点击了修改: ' + row.campusName);
    }
  }
};
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}
</style>